<template>
  <view id="addfriendbox">
    <!-- 搜索框 -->
    <view class="searchbox">
      <view class="search">
        <image src="../../static/message/Vector.png" style="width: 32rpx;height: 32rpx;padding-top: 25rpx;" mode="">
        </image>
        <view class="sinput">
          <input type="text" placeholder="账号或手机号">
        </view>
      </view>
    </view>
    <!-- 搜索框 -->
    <view class="account">
      <view class="acctext">
        我的平台号：<span style="color: #FE474C;">ZQ121007</span>
      </view>
      <view class="accimg">
        <image src="../../static/message/erweima.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
      </view>
    </view>
    <!-- 内容 -->
    <view class="content">
      <view class="list">
        <view class="listitem">
          <view class="itemleft">
            <image src="../../static/message/scan.png" mode="" style="width: 108rpx;height: 108rpx;"></image>
          </view>
          <view class="itemcent">
            <view class="centtit">
              扫一扫
            </view>
            <view class="centtext">
              扫描平台码/订单码/群二维码
            </view>
          </view>
          <view class="itemright">
            <image src="../../static/message/bank-more.png" style="width: 14rpx;height: 28rpx;" mode=""></image>
          </view>
        </view>

        <view class="listitem">
          <view class="itemleft">
            <image src="../../static/message/yellow_add_friend.png" mode="" style="width: 108rpx;height: 108rpx;">
            </image>
          </view>
          <view class="itemcent">
            <view class="centtit">
              手机联系人
            </view>
            <view class="centtext">
              添加或邀请通讯录的朋友
            </view>
          </view>
          <view class="itemright">
            <image src="../../static/message/bank-more.png" style="width: 14rpx;height: 28rpx;" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  #addfriendbox {
    background-color: #F5F5F5;
    width: 100vw;

    // 搜索框
    .searchbox {
      width: 85%;
      margin: auto;
      margin-top: 32rpx;
      height: 80rpx;
      border-radius: 50rpx;
      background-color: #FFFFFF;
      box-sizing: border-box;

      .search {
        margin-left: 150rpx;
        display: flex;
        justify-content: center;

        .sinput {
          margin-left: 20rpx;
          padding-top: 16rpx;
        }
      }
    }

    // 搜索框
    .account {
      display: flex;
      justify-content: center;
      margin-top: 36rpx;
      box-sizing: border-box;

      .acctext {}

      .accimg {
        padding-top: 2rpx;
        padding-left: 20rpx;
      }
    }

    // 内容

    .content {
      width: 100%;

      .list {
        margin-top: 36rpx;

        .listitem {
          width: 100%;
          height: 160rpx;
          background-color: #FFFFFF;
          box-sizing: border-box;
          padding: 24rpx 26rpx;
          display: flex;
          border-bottom: solid 2rpx #F8F8F8;

          .itemleft {
            width: 20%;
          }

          .itemcent {
            width: 70%;

            .centtit {
              font-size: 35rpx;
              font-weight: bold;
              margin-bottom: 10rpx;
            }

            .centtext {
              color: #9E9E9E;
            }
          }

          .itemright {
            width: 10%;
            padding-top: 35rpx;
            text-align: center;
          }
        }
      }
    }

    // 内容
  }
</style>